2 Site

Web-Technologien sind parallel verlaufende Konzepte, die einander ergänzen. Oft gibt es für eine bestimmte Fragestellung mehrere ähnliche Ansätze. In ExpressionWeb sind daher alle diese alternativen Möglichkeiten gleichzeitig enthalten und man kann je nach Kenntnisstand die eine oder andere Möglichkeit wählen.

Der Schwerpunkt der Anwendung von Expression Web liegt am Design und nicht auf der Programmierung.

Der heutige Workshop soll zeigen, wie man rasch zu einem tollen Ergebnis kommt und wie man dieses Ergebnis am Webserver speichert.

Ganz ohne die Symbolleisten kommt man nicht aus. Beispielsweise kann man in der Bildsymbolleiste eine automatische Miniaturansicht generieren lassen, was über die Menüs allein nicht möglich ist.

Was ist eine „Homepage“? Eine Homepage ist ein Orchester von Dateien und Ordnern, eventuell auch server- oder clientseitigen Interpretern, Compilern und Datenbanken, die gemeinsam das herstellen, was der Benutzer im Browser sieht. Expression Web nennt diese Homepages „Sites“. Es sind einfache Ordner im Dateisystem, deren Symbol ein Ordner mit einer kleinen Weltkugel ist, damit man sieht, dass das eine Website ist.

Eine einzelne Seite kann auch schon eine Homepage sein, wenn sie nur Text enthält. Eine solche Datei läuft unter allen Bedingungen; sowohl am Desktop (mit oder ohne Internet-Verbindung) als auch auf einem Server. Eine Einzelseite hat die Endung .htm oder .html.

Wenn diese Seite auch Bilder enthält, benötigt sie weitere Dateien, die aber nicht unbedingt am eigenen Rechner sein müssen, sondern sich auch irgendwo im Internet befinden können. Wenn diese Bilder allerdings aus dem Internet kommen, benötigt man zum Testen immer auch eine Internet-Verbindung.

Alle Dateitypen, die eine serverseitige Unterstützung brauchen, erfordern auch immer einen Server, um dargestellt werden zu können. Das sind: .ascx, .aspx, .php, .master. Daher hat Expression Web auch einen Webserver eingebaut. Öffnet man eine beliebige Datei und klickt man auf Datei -> Browservorschau -> z.B. Chrome, sieht man in der Adresszeile zum Beispiel : http://localhost:4072/default.htm. Das bedeutet, dass ein mit Expression Web mitgelieferter Webserver die Verarbeitung der Datei übernommen hat.

Dynamische Webvorlagen .dwt können nur mit Expression Web bearbeitet werden und müssen nicht auf den Server geladen werden.

Konzepte von Expression Web

Wie kann man rasch eine tolle Homepage erstellen?

Richtige Antwort: man macht sie nicht selbst – speziell die Navigation und die Gestaltung – und verwendet eine fertige – oder eine vorgefertigte Seite.

Handarbeit

Hier muss man alles selbst machen. Nur für Hartgesottene. Daher gleich einmal einige Details zu einer neuen, leeren Seite.

Eine neue leere Website erhält bei ExpressionWeb den fortlaufenden Namen MeineWebsite1 und enthält (fast) nichts. Wenn man die versteckten Dateien ausgeblendet hat, dann sieht man tatsächlich keine Dateien. Es sind aber drei unsichtbare Objekte (zwei Ordner _vti_cnf und _vti_pvt und die Datei desktop.ini) in einer leeren Website enthalten.

Die Ordner enthalten Informationen, die Expression Web benötigt, um die Webseite zu verwalten und sind auch in Dreamweaver und Share Point bekannt.

In _vti_cnf ist für jede Datei des Ordners eine gleichnamige Datei angelegt, die aber nicht das Format der Original-Datei hat sondern nur Meta-Informationen enthält.

InfoTip erscheint beim Überfahren des Ordners mit der Maus und IconFile ist das Ordner-Symbol.

Löscht man sie dennoch, dann werden Sie im Zuge von Bearbeitungsvorgängen in Expression Web wieder angelegt.

Überhaupt sollte man sich folgende Arbeitsweise zurechtlegen: in den Webordnern sollte man Dateien nur durch Ziehen in Expression Web hineinkopieren und auch nur in ExpressionWeb löschen. Damit kann ExpressionWeb seine interne Organisation immer aktuell halten.

Sollte es dennoch einmal passieren, dass etwas durcheinandergerät, empfiehlt es sich folgendes Kommando anzuwenden: Extras -> Links neu berechnen. Damit wird auch das Dateienverzeichnis in ExpressionWeb mit dem Verzeichnis auf der Festplatte synchronisiert.

Vorlagen (Templates)

Vorlagen sind in Ordnern mit der Endung .tem gespeichert in c:\programme\Microsoft Expression\WEBS gespeichert.

Ihre Entwicklung ist nicht schwierig, wird aber händisch und ohne Unterstützung durch Expression Web durchgeführt. Man beschränkt sich daher meist auf die Benutzung der bestehenden Vorlagen.

Wählt man eine Vorlage, werden alle Dateien im Ordner .tem in das eigene Web übernommen, wobei auch Ordner angelegt werden können, entsprechend den Angaben in der .inf-Datei.

Das Angenehme an den Vorlagen ist, dass es ein Vorschaubild gibt und man daher nicht so lange braucht, um eine geeignete Version auszuwählen.

Die kopierte Vorlage, meist geht es um die Texte, kann man in der Datei .dwt an die eigenen Bedürfnisse anpassen.

Es gibt 6 vordefinierte Vorlagen für eine Website für Kleinbetriebe, 6 Vorlagen für Organisationswebs und 7 Vorlagen für eine persönliche Website. Weitere Templates können dort hineinkopiert werden.

Der Aufbau ist jeweils derselbe aber das Aussehen verändert sich. Folgende Templates sind vordefiniert:

Persönliche Website

Organisation

Kleinunternehmen

Man kann auch von diversen Webquellen weitere Templates downloaden und diese .tem-Folder in den Ordner WEBS von ExpressionWeb kopieren.

Auf dieser Website wurde mehr als 80 Templates in Webpakete kovertiert. Diese sind im Menüpunkt "Webs-Pakete" downloadbar.

Webpakete

Webpakete sind den Templates sehr ähnlich. Man importiert sie aber in eine Site und kann dieses Format (mit Änderungen) wieder exportieren und anderswo weiter verwenden.

Außerdem kann man in eine Website mehrere Webpakete einfügen, was mit Vorlagen nicht möglich ist.

Ein Webpaket ist eine Kopie eines fertigen Webs in einer Datei mit der Endung .fwp, wobei meist die personalisierten Texte durch Blindtext ersetzt werden. Man kann fertige Webpakete importieren und eigene Webs als Webpaket exportieren.

Man kann auch sagen, dass ein Webpaket eine Website in einer einzelnen Datei darstellt. Man könnte auch einfach ein ZIP-Archiv des Webs erstellen und in eine anderes hineinkopieren. Das hat aber den Nachteil, dass die verborgenen Organisationsdateien nicht aktualisiert werden. Außerdem kann bei einem Webpaket auch eine Beschreibung, der Autor und die Firma angegeben.

Um eine Website auf der Grundlage eines Webpakets zu erstellen, geht man so vor:

Site -> Neue Site -> Allgemein -> Leere Website
Site -> Importieren -> Von Webpaket importieren (.fwp)

Um das Design eines Webpakets beurteilen zu können, muss man es wie oben beschrieben importieren.

Dieses Verzeichnis ist so konfiguriert, dass kein Startdokument definiert ist und außerdem das Verzeichnis angezeigt werden kann. Daher kann man den Inhalt eines jeden Verzeichnisses untersuchen.

Website Import

Site -> Neu -> Allgemein - Websiteimport-Assistent
oder Site -> Neue Site -> Allgemein -> Leere Website
Site -> Import -> Websiteimport-Assistent

Man kann damit ganz prominente Seitenentwürfe bis hinauf zur Microsoft-Website in das eigene Web importieren.

An Verbindungstypen gibt es (diese gibt es auch für das Publizieren eines Webs, Ausnahme HTTP)

Von diesen Möglichkeiten am interessantesten ist HTTP. Man kann damit jede beliebige Website mit einem hübschen Layout angeben und dann festlegen:

Funktioniert perfekt – aber nur für passive Websites (das sind solche, die wir gerade im Begriff sind herzustellen). Funktioniert zwar auch für dynamische Websites aber nur vordergründig, weil die statische Version eines bestimmten Augenblicks gespeichert wird. Die dahinter liegenden dynamischen Strukturen werden nicht gespeichert, die bleiben ein Geheimnis des Servers.

Es gibt auch Seiten, die sich dem Download widersetzen (ist aber eher die Ausnahme). Beispiel: http://by-expression.com/page/Tutorials

Aber das Aussehen, die JavaScript- und Css-Dateien werden perfekt „gegrabbt“.

Weitere nützliche Anwendung ist, dass man den Download von Bildern oder anderen verlinkten Daten (zip-Dateien, mp3-Dateien…) automatisieren kann. Auf einer Webseite können sich Hunderte solcher Links befinden und es ist eine mühsame Sache, alle diesen verlinkten Objekte einzeln anzuklicken und downzuloaden. Der Website Import Assistent kann genau das. Also auch, wenn man nicht unbedingt ein Layout abkupfern will, ist dieser Assistent ein wahrer „Hexenmeister“.

Master Pages

Für diese "Meisterklasse" gibt es leider keine fertigen Vorlagen. Man muss sie selbst herstellen. Man kann sie aber verhältnismäßig einfach aus einer dynamischen Webvorlage herstellen. Es gibt dazu eine eigene Anleitung.

Hier ein skizzierter Weg, wie man das machen kann: Man übernimmt eine vorhandene Dynamische Webvorlage in eine solche leere Masterseite, wobei die variablen Bereiche die Tags „ContentPlaceHolder“ sind.

Man erstellt eine neue, leere Site mit Site -> Neu -> Allgemein -> Leere Site und erzeugt in dieser Seite eine Masterseite mit Datei -> Neu -> Seite… -> Allgemein -> Masterseite und gibt ihr den Namen Site.master. Diese Master-formatiert man so, wie man das haben möchte

Danach erstellt man die weiteren Seiten, zum Beispiel die Startseite default.aspx so: Datei -> Neu… - > Seite -> Aus Masterseite erstellen -> „Site.master“ wählen. In dieser Seite platziert man soviele Content-Tags als es in der Masterseite benutzerdefinierte Bereiche gibt, nach dem Muster:

<asp:Content ID="Content3" runat="server" ContentPlaceHolderID="MainContent">
…hier ist der eigentliche Content…
</asp:Content>

Wenn man jetzt im Browser von Expression-Web die Seite default.htm aufruft, sieht man eine Seite, die aus der Masterseite site.master und den Daten der Detailseite default.aspx zusammengesetzt ist ohne aber dass die Elemente der Masterseite in der Detailseite enthalten wären. Der Grund ist, dass diese Verbindung erst zum Zeitpunkt des Aufrufs am Server geschieht.

Man kann diese Seiten in Expression Web anschauen und auch in der Browser-Vorschau aber alle diese Ansichten benutzen den internen Webserver von Expression Web, um die Verbindung zwischen den beiden Dateien herzustellen. Man kann aber nicht die Datei default.aspx zum Beispiel aus dem Dateisystem aufrufen, denn der Browser kann die Endung aspx nicht verarbeiten. Man benötigt wür diese Technik unbedingt einen Webserver.

Konzept der „Dynamischen“ Webvorlagen

Sowohl in den Vorlagen (Templates) als auch in den Webpaketen gibt es zumindest eine Datei mit der Endung .dwt, zum Beispiel eine master.dwt. Es kann aber auch mehrere geben. Es handelt sich um eine gewöhnliche Html-Datei, deren Inhalt in alle Seiten eines Webs hinzugefügt wird, mit dem Effekt, dass alle Seiten dasselbe Aussehen haben.

Die dynamische Webvorlage wird daher allen am Web beteiligten Seiten „aufgedrückt“.

Der Zusammenhang zwischen der Webvorlage und den Detailseiten ist insofern „dynamisch“ als bei Änderungen an der Vorlage sich diese Änderung auch in allen anderen Seiten des Webs zeigt. Allerdings nicht durch einen wirklich dynamischen Vorgang sondern so, dass diese Änderung in allen Detailseiten während des Entwurfs in Expression Web hineingeschrieben wird. Beim Abruf durch den Browser verhalten sich diese Seiten wie statische HTML-Seiten.

Publikation eines Webs

Bevor man ein Web publiziert, sollte man es testen. Warum? Alles, was man am lokalen PC erledigen kann, geht schneller. Testen im Web bedeutet auch, dass eine Seite während dieser Testzeiten nicht oder fehlerhaft erreichbar ist und daher werden durch vorherige Tests diese Zeiten möglichst kurz gehalten.

Der erste Test erfolgt durch eine Browservorschau in Expression Web. Danach sollte man das Web am lokalen Webserver publizieren und dort testen (Anleitung zur Installation des lokalen Webservers in den Aufgaben). Erst dann publiziert man die Seite im Web.

Es gibt einerseits verschiedene Protokolle für die Publikation und außerdem kann man ein Web auf verschiedenen Zielservern speichern. Für jeden dieser Transfers muss man „Veröffentlichungsziele“ definieren.

Verbindungseinstellungen

Anmerkung: Verwendet man für den Transfer das Programm FileZilla, ist der Verzeichnisname \exweb\exweb.clubcomputer.at\wwwroot Es muss also der Benutzername und ein Backslash vorangestellt werden.

FTP-Server (für ClubComputer zu verwenden)

Am lokalen Webserver

Die Inbetriebnahme des lokalen Webservers wird an anderer Stelle beschrieben. Wichtig ist, dass der lokale Name des Webs in der Datei hosts unter C:\Windows\System32\Drivers\etc eingetragen wird:

Homepage = Website